{% extends 'extend/default.html' %}
{% block title %}Excel in the Box!  -- liuzhixiang@lightinthebox.com{% endblock %}

{% block script %}
Ext.onReady(function(){
      
    //顶部的标题条  
    var topbar = new Ext.Toolbar({
            id:'topbar',
            height : 26,
            split: true,
            frame:true,
        border:false,
            region:'north',
            items:[
                'Excel in the Box! -- 报表任务管理器'
            ]
    });
    
    //中间工作台
    var workPanel = new Ext.TabPanel({
            region:'center',
            margins : '0 3 3 3'
    });
    
    
    var layout = new Ext.Viewport({
            id:'mainLayout',
            layout:'border',
            renderTo:document.body,
            items:[topbar,workPanel]
    });
	

    var store = new Ext.data.JsonStore({
        fields: ['title','username','createTime','start_date','end_date','output_time','comment'],
        url:'/manager/action_listHistory',
        root: 'items',
        totalProperty: 'count',
        remoteSort: true
    });
    
    
    
    var columns = [
        {header:'任务标题',dateIndex:'title'},
        {header:'创建人',dateIndex:'username'},
        {header:'创建时间',dateIndex:'createTime'},
        {header:'最后修改时间',dateIndex:'lastModifiedTime'},
        {header:'最后导出时间',dateIndex:'lastSendTime'},
        {header:'接收人数',dateIndex:'member_id'},
    ]; 
	
    //Search Bar
    var gridSearch = new Ext.grid.TopSearchBar({labelWidth:60,toggleAdvanveSearch:'show',items:[
        {xtype:'textfield', fieldLabel:'任务标题', name:'orderId'},
        {xtype:'textfield', fieldLabel:'创建人', name:'orderId'},
        {text:'查询', xtype:'button', cls:'fl', handler:EU.gridSearch.createCallback('mainGrid')}
        //{text:__('advance_search'),toggleButton:true, toggleText:__('toggle_search'), xtype:'button', cls:'fl'}
    ]});  
        
    var historyPanel = new Ext.grid.GridPanel({
        id:'historyPanel',
        tbar: gridSearch,
        title: '任务列表',
        store: store,
        columns: columns,
        loadMask: true,
        stripeRows: true,
        bbar: EU.createPageBar(store,ED.pageLimit)
    });
    
    workPanel.add(historyPanel);
    workPanel.setActiveTab(historyPanel);
    layout.doLayout();
    
    
    
    
    
    
    //新建任务的框
    /**
     * 1.activeHandlers 
     *     当某一步被激活后执行的。这里用来修饰样式和控制按钮的显示
     * 2.nextStepHandlers
     *     当某一步面板的下一步按钮被点击的时候执行的
     * 3.startHandler，finishHandler
     *     分别是面板弹出，以及面板点完成的时候执行的
     */
    Ext.ux.StepWindow = Ext.extend(Ext.Window,{
            currentStep:-1,
            maxStep:0,
            preStep : function(){
                    if(this.currentStep<=0)return;
                    this.setActiveItem(this.currentStep-1);
            },
            nextStep : function(){
                    if(this.currentStep>=this.maxStep-1)return;
                    if(this.currentStep>=0){
                            if(this.nextStepHandlers[this.currentStep].call(this)===false)return;
                    }
                    this.setActiveItem(this.currentStep+1);
            },
            setActiveItem : function(step){
                    this.currentStep = step;
                    this.setTitle(this.titles[step]);
                    var cradLayout = this.items.items[0].getLayout();
                    cradLayout.setActiveItem(step);	
                    this.activeHandlers[step].call(this);
                    this.syncSize();
                    this.doLayout();
            },
            show : function(){
                    Ext.ux.StepWindow.superclass.show.call(this);
                    this.startHandler();
                    this.currentStep = -1;
                    var cradLayout = this.items.items[0].getLayout();
                    this.maxStep = cradLayout.container.items.items.length;
                    this.nextStep();
            }
    });
    var step1 = new Ext.form.TextArea({
        emptyText:'请填写SQL......'
    });
    
    var step2store = new Ext.data.JsonStore({
        fields: ['grid_index',
            'a','b','c','d','e','f','g',
            'h','i','j','k','l','m',
            'n','o','p','q','r','s','t',
            'u','v','w','x','y','z'
        ],
        url:'/manager/action_sqlReview',
        root: 'items',
        totalProperty: 'count',
        remoteSort: true
    });
    
    
    
    var step2columns = [
        {header:'序号',dateIndex:'grid_index',width:35,align:'center'},
        {header:'A',dateIndex:'a'},
        {header:'B',dateIndex:'b'},
        {header:'C',dateIndex:'c'},
        {header:'D',dateIndex:'d'},
        {header:'E',dateIndex:'e'},
        {header:'F',dateIndex:'f'},
        {header:'G',dateIndex:'g'},
        {header:'H',dateIndex:'h'},
        {header:'I',dateIndex:'i'},
        {header:'J',dateIndex:'j'},
        {header:'K',dateIndex:'k'},
        {header:'L',dateIndex:'l'},
        {header:'M',dateIndex:'m'},
        {header:'N',dateIndex:'n'},
        {header:'O',dateIndex:'o'},
        {header:'P',dateIndex:'p'},
        {header:'Q',dateIndex:'q'},
        {header:'R',dateIndex:'r'},
        {header:'S',dateIndex:'s'},
        {header:'T',dateIndex:'t'},
        {header:'U',dateIndex:'u'},
        {header:'V',dateIndex:'v'},
        {header:'W',dateIndex:'w'},
        {header:'X',dateIndex:'x'},
        {header:'Y',dateIndex:'y'},
        {header:'Z',dateIndex:'z'}
    ]; 
	
        
    var step2 = new Ext.grid.GridPanel({
        store: step2store,
        columns: step2columns,
        loadMask: true,
        stripeRows: true,
        bbar: EU.createPageBar(step2store,ED.pageLimit)
    });
     
    var createOutputTaskWindow = new Ext.ux.StepWindow({
        id:'createOutputTaskWindow',
        title:'Step1:填写导报表SQL -- 新建导报表任务',
        titles:['Step1:填写导报表SQL -- 新建导报表任务','Step2:预览并完成 -- 新建导报表任务'],
        activeHandlers:[
            function(){
                this.buttons[0].disable();
                this.buttons[1].show();
                this.buttons[2].hide();
            },function(){
                this.buttons[0].enable();
                this.buttons[1].hide();
                this.buttons[2].show();
            }
        ],
        nextStepHandlers:[
            function(){
		    	var cradLayout = this.items.items[0].getLayout();
			var sql = step1.getValue();
		    	var store = step2.getStore();                    
		    	store.baseParams = {sql:sql};
		    	store.load({params:{start:0,limit:ED.pageLimit}});
            },
            function(){
            }
        ],
        startHandler:function(){
        },
        finishHandler:function(){
        },
        buttons:[
                {text:'上一步',handler:function(){createOutputTaskWindow.preStep();}},
                {text:'下一步',handler:function(){createOutputTaskWindow.nextStep();}},
                {text:'完成',handler:function(){createOutputTaskWindow.finishHandler()}},
                {text:'取消',handler:function(){createOutputTaskWindow.hide();}}
        ],
        modal:true,
        width:912,
        autoHeight:true,
        border:false,
        resizable: false,
        items:[{
            layout:'card',activeItem: 0,width:900,height:480,border:false,
            layoutConfig:{renderHidden:false,deferredRender : false},
            items:[step1,step2]
        }]
    });
    
    
    
    
    
    
    
    
    var gridButton = new Ext.Toolbar({renderTo:historyPanel.tbar,items: ['选中项操作：',
        {text:'新建导报表任务',iconCls:'icon_excel',handler:function(){
            createOutputTaskWindow.show();
        }}
    ]});
    historyPanel.syncSize();
    layout.doLayout();
    
    store.load({params:{start:0,limit:ED.pageLimit}});
	
	
	
	
	
});
{% endblock %}